{% extends "base.html" %}

{% block maintitle %}
  Oppia Editor
{% endblock maintitle %}

{% block subtitle %}
  {{ title }}
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript">
    GLOBALS.can_edit = JSON.parse('{{can_edit|js_string}}');
    GLOBALS.INVALID_PARAMETER_NAMES = JSON.parse('{{INVALID_PARAMETER_NAMES|js_string}}');
    GLOBALS.NEW_STATE_TEMPLATE = JSON.parse(
      '{{NEW_STATE_TEMPLATE|js_string}}');
  </script>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    if (window.google && window.google.load) {
      google.load('visualization', '1', {packages: ['corechart']});
    } else {
      throw 'error: Could not load google visualization library. Are you offline?';
    }
  </script>

  {{dependencies_html}}
{% endblock header_js %}

{% block navbar_additions %}
  <li class="dropdown" ng-controller="EditorHelpTab">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Help
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown">
        <a href="#" ng-click="openEditorTutorial()">Tutorial</a>
      </li>
      <li class="dropdown">
        <a href="https://code.google.com/p/oppia/wiki/PlanningYourExploration" target="_blank">
          Planning Your Exploration
        </a>
      </li>
      <li class="dropdown">
        <a href="https://code.google.com/p/oppia/wiki/DesignTips" target="_blank">
          Exploration Design Tips
        </a>
      </li>
    </ul>
    <div ng-if="postTutorialHelpPopoverIsShown" class="popover bottom oppia-post-tutorial-popover">
      <div class="arrow"></div>
      <div class="popover-content">If you need help in the future, click here!</div>
    </div>
  </li>
{% endblock %}

{% block content %}
  {% if announcement %}
    <div class="oppia-align-center oppia-warning">
      {{ announcement }}
    </div>
  {% endif %}

  <div ng-controller="ExplorationEditor" ng-cloak>
    <script type="text/ng-template" id="modals/publishExploration">
      <div class="modal-header">
        <h3>Publish Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to publish an exploration!
        </p>
        <p>
          <strong>Important:</strong> Site moderators are likely to remove published explorations that do not meet the following basic criteria (<a href="/site_guidelines#/publication-criteria" target="_blank">why?</a>):
          <ul>
            <li>It should help its intended audience learn something new.</li>
            <li>It should convey more than a single isolated factoid.</li>
            <li>It should provide useful feedback and guidance to help the learner.</li>
            <li>It should not substantially duplicate existing explorations.</li>
          </ul>
        </p>
        <p>
          You can read more about these criteria on the <a href="/site_guidelines#/publication-criteria" target="_blank">exploration publishing criteria</a> page.
        </p>

        <p>
          If your exploration meets all these criteria, please feel free to publish
          it so that others can playtest and improve it! Good explorations can subsequently be
          moved to the gallery. (You can find more information
          <a href="/site_guidelines#/how-to-use" target="_blank">here</a>
          about how this works.)
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-success protractor-test-confirm-publish" ng-click="publish()">Publish Exploration</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/nominateExploration">
      <div class="modal-header">
        <h3>Nominate for featured status</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to nominate this exploration for featured status in the gallery!
        </p>

        <p>
          Currently, the decision to feature an exploration is based on moderator review.
          When you submit an exploration for review, a moderator will play through
          it, look at its structure, and decide whether it fits the
          <a href="/site_guidelines#/publication-criteria">criteria for featured status</a>.
          If not, the moderator will make a series of specific suggestions on how
          to make the exploration satisfy the criteria, and work with the editor(s)
          to get it featured.
        </p>

        <p>
          <strong>To kick off the review process</strong>, please make a post to the
          <a href="{{moderator_request_forum_url}}" target="_blank">request forum</a>, and
          include a link to the exploration.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="close()">Close</button>
        <a class="btn btn-success" href="{{moderator_request_forum_url}}" target="_blank">Post in the request forum</a>
      </div>
    </script>

    <script type="text/ng-template" id="modals/embedExploration">
      <div class="modal-header">
        <h3>Embed exploration in another web page</h3>
      </div>

      <div class="modal-body">
        <p>
          To embed this exploration, copy the following HTML into the source code of your webpage:
        </p>

        <pre>
&lt;oppia oppia-id="<[explorationId]>" src="<[serverName]>"
       exploration-version="<[explorationVersion]>"&gt;
&lt;/oppia&gt;

&lt;script src="https://cdn.jsdelivr.net/oppia/0.0.1/oppia-player.min.js"&gt;
&lt;/script&gt;</pre>

        <p>
          Note that the last two lines only need to be included once in the embedding webpage, even if you are embedding multiple explorations. For more information, please have a look at our <a href="https://code.google.com/p/oppia/wiki/EmbeddingYourExploration">documentation</a>.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="close()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteExploration">
      <div class="modal-header">
        <h3>Delete Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Really delete this exploration? <strong>This action cannot be reversed.</strong>
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-danger" ng-click="reallyDelete()">Delete Exploration</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/saveExploration">
      <div class="modal-header">
        <h3>Save Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          <span ng-if="commitMessageIsOptional">(Optional)</span>
          Please enter a brief description of what you have changed:
          <textarea rows="3" cols="50" ng-model="commitMessage" focus-on="saveChangesModalOpened"></textarea>
        </p>

        <div ng-if="explorationChangesExist">
          <em>
            You changed the following properties of the exploration:
          </em>
          <ul>
            <li ng-repeat="(propertyName, changeInfo) in explorationPropertyChanges">
              <[formatExplorationPropertyChange(propertyName, changeInfo)]>
            </li>
          </ul>
        </div>

        <p ng-if="addedStates.length > 0">
          <em>You added the following states</em>: <strong><[formatStateList(addedStates)]></strong>
        </p>

        <div ng-if="stateChangesExist">
          <em>
            You made the following changes to states:
          </em>
          <div ng-repeat="(stateName, stateChanges) in statePropertyChanges">
            <h5><[stateName]></h5>
            <ul>
              <li ng-repeat="(propertyName, changeInfo) in stateChanges">
                <[formatStatePropertyChange(propertyName, changeInfo)]>
              </li>
            </ul>
          </div>
        </div>

        <p ng-if="deletedStates.length > 0">
          <em>You deleted the following states:</em> <strong><[formatStateList(deletedStates)]></strong>
        </p>

        <p ng-if="changedStates.length > 0">
          <em>You changed the following states:</em> <strong><[formatStateList(changedStates)]></strong>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-success protractor-test-close-save-modal" ng-disabled = "!commitMessageIsOptional && !commitMessage" ng-click="save(commitMessage)">Save Exploration</button>
      </div>
    </script>

    <div class="container">
      <div class="row" ng-if="explorationRightsService.isCloned()">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="oppia-align-center alert alert-warning" style="padding: 2px; width: 90%;">
            <strong>Note:</strong> This is a private, unpublishable copy of a
            <a ng-href="<[getExplorationUrl(explorationRightsService.clonedFrom())]>" target="_blank">public exploration</a>.
            You are very welcome to submit feedback to improve the original exploration: to do this,
            click the previous link, then click the Feedback button on the top-right.
            Thank you!
          </div>
        </div>
      </div>

      <div class="row oppia-exploration-editor-top-row">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div ng-if="!isInPreviewMode">
            <div>
              <span class="oppia-page-title">
                <[explorationTitleService.displayed]>
              </span>
            </div>
            <div>
              <span class="label label-info">
                <[explorationCategoryService.displayed]>
              </span>
              <span ng-if="explorationRightsService.isPrivate()" class="label label-primary">
                Private
              </span>
              <span ng-if="explorationRightsService.isPublic()" class="label label-primary">
                Public
              </span>
              <span ng-if="explorationRightsService.isPublicized()" class="label label-primary">
                Featured
              </span>
              <span ng-if="explorationRightsService.isCloned()" class="label label-primary">
                Cloned
              </span>
              <span ng-if="explorationRightsService.isCommunityOwned()" class="label label-primary">
                Community-owned
              </span>
            </div>
          </div>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8">
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
              <span class="pull-right" style="margin-top: 10px;">
                <span ng-show="!isInPreviewMode">

                  <span class="oppia-exploration-ctrl" ng-if="!explorationRightsService.isPrivate()">
                    <button class="btn btn-default" title="Embed this exploration in another webpage." ng-click="showEmbedExplorationModal()" ng-disabled="isExplorationSaveable()">
                      <span class="glyphicon glyphicon-share"></span>
                    </button>
                  </span>

                  {% if can_publish %}
                    <!-- The 'display: inline-block' is needed for tooltips to display when the button is disabled. -->
                    <div style="display: inline-block;" ng-if="explorationRightsService.isPrivate()" title="<[getPublishExplorationButtonTooltip()]>">
                      <button type="button" class="btn btn-default protractor-test-publish-exploration" ng-class="{'btn-success': !isExplorationLockedForEditing() && !warningsList.length}" ng-click="showPublishExplorationModal()" ng-disabled="isExplorationLockedForEditing() || warningsList.length">
                        Publish in Gallery
                      </button>
                    </div>
                  {% endif %}

                  <span class="oppia-exploration-ctrl" ng-if="editabilityService.isEditable() && explorationRightsService.isPublic()">
                    <button type="button" class="btn btn-default" ng-click="showNominateExplorationModal()" ng-disabled="isExplorationSaveable()" ng-class="{'btn-success': !isExplorationSaveable()}" tooltip="Click this button to nominate this exploration for featured status in the gallery." tooltip-placement="bottom">
                      Nominate for Featured Status
                    </button>
                  </span>

                  <span ng-if="editabilityService.isEditableOutsideTutorialMode()">
                    <div class="btn-group" dropdown>
                      <button id="tutorialSaveExplorationButton" class="btn btn-default protractor-test-save-changes" ng-class="{'btn-success': isExplorationSaveable()}" ng-click="saveChanges()" ng-disabled="!isExplorationSaveable()">
                        <span ng-if="!isSaveInProgress">
                          Save Changes
                          <span ng-if="getChangeListLength()">(<[getChangeListLength()]>)</span>
                        </span>
                        <span ng-if="isSaveInProgress">
                          Saving...
                        </span>
                      </button>
                      <button type="button" class="btn btn-default dropdown-toggle protractor-test-save-discard-toggle">
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a ng-click="discardChanges()" ng-class="{'oppia-disabled-link': !isExplorationSaveable()}" class="protractor-test-discard-changes" title="Discard all pending changes.">Discard Changes</a></li>
                      </ul>
                    </div>
                  </span>
                </span>

                <div class="btn-group">
                  <label class="btn btn-default protractor-test-exit-preview-mode" ng-model="isInPreviewMode" btn-radio="false" ng-click="exitPreviewMode()">
                    <span ng-if="!editabilityService.isEditable()">
                      <span class="glyphicon glyphicon-file"></span> Source
                    </span>
                    <span ng-if="editabilityService.isEditable()">
                      <span class="glyphicon glyphicon-pencil"></span> Edit
                    </span>
                  </label>
                  <label id="tutorialPreviewExplorationButton" class="btn btn-default protractor-test-enter-preview-mode" ng-model="isInPreviewMode" btn-radio="true" ng-click="enterPreviewMode()"><span class="glyphicon glyphicon-play"></span> Preview</label>
                </div>
              </span>
            </div>
          </div>

          <div class="row" ng-if="!isInPreviewMode">
            <div class="col-lg-6 col-md-6 col-sm-6">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
              <div ng-show="warningsList.length" ng-click="toggleExplorationWarningVisibility()">
                <div class="alert alert-warning oppia-exploration-warnings-box pull-right">
                  <div>
                    <span ng-if="!areExplorationWarningsVisible" style="color: black;">
                    </span>
                    <span ng-if="areExplorationWarningsVisible" style="color: black;">
                    </span>
                    <span class="glyphicon glyphicon-warning-sign"></span>
                    <strong><[warningsList.length]></strong> warning<span ng-if="warningsList.length > 1">s</span>
                    <span class="glyphicon glyphicon-chevron-right oppia-warning-chevron pull-right" ng-if="!areExplorationWarningsVisible"></span>
                    <span class="glyphicon glyphicon-chevron-down oppia-warning-chevron pull-right" ng-if="areExplorationWarningsVisible"></span>
                  </div>
                  <div collapse="!areExplorationWarningsVisible">
                    <ul>
                      <li ng-repeat="warningText in warningsList track by $index">
                        <[warningText]>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="!isInPreviewMode">
        <tabset>
          <tab heading="Main" active="getTabStatuses().main.active" select="selectMainTab()">
            <div class="row">
              <div class="col-lg-9 col-md-9 col-sm-9">
                {% include 'editor/state_editor.html' %}
              </div>
              <div class="col-lg-3 col-md-3 col-sm-3">
                {% include 'editor/exploration_graph.html' %}
                {% include 'editor/state_statistics.html' %}
              </div>
            </div>
          </tab>

          <tab heading="Statistics" active="getTabStatuses().stats.active" select="selectStatsTab()">
            {% include 'editor/exploration_statistics.html' %}
          </tab>

          <tab heading="Settings" active="getTabStatuses().settings.active" select="selectSettingsTab()">
            {% include 'editor/exploration_settings.html' %}
          </tab>

          <tab heading="History" active="getTabStatuses().history.active" select="selectHistoryTab()" disabled="explorationRightsService.isCloned()">
            {% include 'editor/exploration_history.html' %}
          </tab>

          <tab heading="<[feedbackTabHeader]>" active="getTabStatuses().feedback.active" select="selectFeedbackTab()">
            {% include 'editor/exploration_feedback.html' %}
          </tab>
        </tabset>
      </div>

      <div class="row" ng-if="!!isInPreviewMode" ng-controller="ExplorationPreview">
        <hr>
        {% include 'editor/exploration_preview.html' %}
      </div>
    </div>
  </div>

  <!-- These definitions must be included exactly once on the page for the graph SVGs to work in Firefox. -->
  <svg width="0" height="0">
    <defs>
      <marker id="arrowhead" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="grey"></path>
      </marker>
      <marker id="arrowhead-green" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="#1F7D1F"></path>
      </marker>
      <marker id="arrowhead-red" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="#B22222"></path>
      </marker>
      <linearGradient id="nodegradient" x1="0%" x2="100%" y1="0%" y2="0%">
        <stop offset="0%" style="stop-opacity: 1; stop-color: darkseagreen;"></stop>
        <stop offset="100%" style="stop-opacity: 0.1; stop-color: darkseagreen;"></stop>
      </linearGradient>
    </defs>
  </svg>

  <script type="text/ng-template" id="inline/param_change_editor">
    {% include 'components/param_change_editor.html' %}
  </script>

  <script type="text/ng-template" id="inline/rule_editor">
    {% include 'components/rule_editor.html' %}
  </script>

  {% include 'components/visualizations.html' %}

{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3.4.11/d3.min.js"></script>
  <script>
    {{ include_js_file('editor/EditorServices.js') }}
    {{ include_js_file('editor/ExplorationEditor.js') }}
    {{ include_js_file('editor/ExplorationGraph.js') }}
    {{ include_js_file('editor/ExplorationPreview.js') }}
    {{ include_js_file('components/valueGeneratorEditor.js') }}
    {{ value_generators_js }}
    {{ include_js_file('components/objectEditor.js') }}
    {{ object_editors_js }}
    {{ include_js_file('editor/RouterServices.js') }}
    {{ include_js_file('editor/ExplorationStatistics.js') }}
    {{ include_js_file('editor/ExplorationSettings.js') }}
    {{ include_js_file('editor/ExplorationHistory.js') }}
    {{ include_js_file('editor/HistoryServices.js') }}
    {{ include_js_file('editor/ExplorationFeedback.js') }}
    {{ include_js_file('editor/StateEditor.js') }}
    {{ include_js_file('editor/StateStatistics.js') }}
    /* These should come after the valueGeneratorEditor scripts. */
    {{ include_js_file('editor/StateInteraction.js') }}
    {{ include_js_file('player/PlayerServices.js') }}
    {{ include_js_file('player/StateTransitionService.js') }}
    {{ include_js_file('components/paramChangeEditor.js') }}
    {{ include_js_file('components/ruleEditor.js') }}
    {% for skin_js_url in skin_js_urls %}
      {{ include_skins_js_file(skin_js_url) }}
    {% endfor %}
  </script>

  {{ skin_templates }}
  {{ widget_templates }}
{% endblock footer_js %}
